<template>
<div id="china">
    <aibotton></aibotton>
    <div class="domestic-wrapper">
      <v-card
        class="title"
        outlined
        tile
        height="18vh"
        color="white"
        style="margin-top:8vh"
        >
        <div id="title1">中国&nbsp;•&nbsp;疫情总览</div>
      </v-card>
      <v-card
        class = "data"
        outlined
        tile
        height="80vh"
        color="white"
        style="margin-top:7vh"
        >
        <Data></Data>
      </v-card>
      <v-card
        class = "title"
        outlined
        tile
        color="white"
        height="21vh"
      >
        <div id="title2">中国&nbsp;•&nbsp;疫情地图</div>
      </v-card>
      <div id="button">
          <v-btn rounded height=36px width="80px" @click ="myVar_value()" outlined fab style="color:red"><span style="font-size:24px">确诊</span></v-btn>
          <v-btn rounded height=36px width="80px" @click ="myVar_deathNum()" outlined fab style="margin-left:10px;color:black;margin-left:46px"><span style="font-size:24px">死亡</span></v-btn>
          <v-btn rounded height=36px width="80px" @click ="myVar_cureNum()" fab outlined style="margin-left:10px;color:#a5b480;margin-left:46px"><span style="font-size:24px">治愈</span></v-btn>
      </div>
      <v-card
        class="map"
        outlined
        tile
        height="76vh"
        width="56vw"
        color="white"
      >
        <MapChina :myVar="myVar" @cityNum="onCityChange"></MapChina>
      </v-card>
        <v-card
          class="title"
          outlined
          tile
          height="200px"
          color="white"
          >
          <div id="title1">中国&nbsp;•&nbsp;省市详情</div>
      </v-card>
      <v-row>
        <v-col
          cols="6">
        <v-card
        class="map"
        outlined
        tile
        height="500px"
        width="41vw"
        color="white"
      >
        <MapCity :cityNum="cityNum"></MapCity>
      </v-card>
        </v-col>
        <v-col
          cols="6">
        <v-card
          class="table"
          outlined
          tile
          height="500px"
          width="40vw"
          color="red">
            <CityTableChina :cityNum="cityNum"></CityTableChina>
        </v-card>
        </v-col>
      </v-row>
      <v-card
        class = "title"
        outlined
        tile
        color="white"
        height="225px"
      >
        <div id="title2">中国&nbsp;•&nbsp;风险地区</div>
      </v-card>
        <Dangercity></Dangercity>     
        <v-card
        class = "title"
        outlined
        tile
        color="white"
        height="300px"
      >
        </v-card>
    </div>
</div>
</template>

<script>
  import MapChina from '../../../components/views/public/Overview/ChinaOverview/MapChina'
  import Data from '../../../components/views/public/Overview/ChinaOverview/Data.vue'
  import CityTableChina from '../../../components/views/public/Overview/ChinaOverview/CityTableChina'
  import MapCity from '../../../components/views/public/Overview/ChinaOverview/MapCity'
  import Dangercity from '../../../components/views/public/Overview/ChinaOverview/Dangercity'
  import aibotton from "../../../components/views/common/AI/aibotton";
  export default {
    name: 'ChinaMap',

    components: {
        MapChina,
        Data,
        MapCity,
        CityTableChina,
        Dangercity,
        aibotton
    },
    data(){
      return{
        myVar: 0,
        dialog: false,
        cityNum:0
      }
    },
    methods:{
      onCityChange(newCity){
        this.cityNum = newCity;
        window.scrollTo({top: 1700, left: 0, behavior: 'smooth'});
      },
      myVar_value(){
        this.myVar = 0;
      },
      myVar_deathNum(){
        this.myVar = 1;
        console.log(this.myVar);
      },
      myVar_cureNum(){
        this.myVar = 2;
        console.log(this.myVar);
      }
    }
  }
</script>
<style scoped>
.map-of-china{
  margin: 20px;
  padding: 20px;
}
#title1{
  display: flex;
  align-items:center;
  margin-top: 11vh;
  justify-content:center;
  font-size: 48px;
  color:black
}
#title2{
  display: flex;
  align-items:center;
  margin-top: 11vh;
  justify-content:center;
  font-size: 48px;
  color:black
}
#button{
  display: flex;
  flex-direction:row;
  justify-content:center;
  height: 50px;
  margin-top:4vh;
}
.domestic-wrapper{
  display: flex;
   justify-content:center;
   align-content: center;
   align-items: center;
  flex-direction:column;
}
.china{
  width: calc(100% - 512px - 32px);
  margin-left: auto;
  margin-right: auto;
}
</style>
